<template>
  <div>
    <el-row class="licc-reset-header licc-reset-top-row" type="flex" justify="center"  align="middle">
      <el-row type="flex" justify="start" align="middle"  style="width:1100px; background-color: #fff">
        <el-col class="licc-reset-top-img" align="left">
          <el-image src="http://lccabc.cn/logo.png" @click.native="homeImageClick" class="licc-login-top-el-image"></el-image>
        </el-col>
        <el-col class="licc-reset-top-title" align="left">
          <em>欢迎注册</em>
        </el-col>
        <el-col class="licc-reset-top-router-home" align="left">
          <div style="position:absolute;bottom:0;right:0;">
            <router-link :to="{name:'home'}">首页<i class="el-icon-d-arrow-right"></i></router-link>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="licc-reset-center licc-reset-top-row" type="flex" justify="center">
      <el-col  class="licc-reset-center-content">
        <el-row type="flex" justify="center">
          <el-col class="reset-container">
            <el-form :model="resetForm" :rules="resetRules" ref="resetForm">
              <el-form-item prop="phone">
                <el-row type="flex" justify="center" class="licc-reset-select-row">
                  <el-col style="width: 30px; padding: 0px 0px 0px 15px">
                    <svg-icon icon-class="user"/>
                  </el-col>
                  <el-col style="width: 350px">
                    <el-input name="phone" type="text" v-model="resetForm.phone" placeholder="帐号" class="licc-reset-select-input"/></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item prop="password">
                <el-row type="flex" justify="center" class="licc-reset-select-row">
                  <el-col style="width: 30px; padding: 0px 0px 0px 15px">
                    <svg-icon icon-class="password"/>
                  </el-col>
                  <el-col style="width: 350px">
                    <el-input name="password" type="text" v-model="resetForm.password" show-password placeholder="输入密码" class="licc-reset-select-input"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-row type="flex" justify="center" style="width: 380px">
                <el-col style="width: 380px; height: 50px">
                  <slide-verification @slideSuccess="slideSuccessFun"></slide-verification>
                </el-col>
              </el-row>
              <el-form-item prop="code">
                <el-row type="flex" justify="center" class="licc-reset-select-row">
                  <el-col style="width: 270px">
                    <el-input name="code" type="text" v-model="resetForm.code" placeholder="验证码" class="licc-reset-select-input"></el-input>
                  </el-col>
                  <el-col style="width: 110px">
                    <div class="licc-reset-select-button" @click="getCode" :class="{'licc-reset-select-button-slide':slideisSuccess}">{{codeButtonTitle}}</div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-button type="primary" style="width:100%;margin-bottom:20px;" :loading="loading"
                         @click.native.prevent="handleLogin">注 册
              </el-button>
              <div class="licc-reset-center-bottom">
                <router-link :to="{name:'login'}">立即登录</router-link> 或
                <router-link :to="{name:'register'}">忘记密码</router-link>
              </div>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="licc-reset-footer" type="flex" justify="center">
      <el-col  class="licc-reset-footer-content">c</el-col>
    </el-row>
  </div>
</template>
<script>
  import SlideVerification from './slideVerification'
  import loginApi from "@/api/login"
  export default {
    name: 'reset',
    components: {
      SlideVerification
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        const usernameRegex = /^1[34578]\d{9}$/
        if (value === ''){
          callback(new Error('请输入手机号码'))
        }
        if (!usernameRegex.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,16}$/
        if (!passwordRegex.test(value)) {
          callback(new Error('密码8-16个字符，包含大写字母，小写字母和数字'))
        } else {
          callback()
        }
      }
      return {
        resetForm: {},
        resetRules: {
          phone: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', validator: validatePassword}],
        },
        passwordType: 'password',
        loading: false,
        /** 验证码点击显示内容 **/
        codeButtonTitle: '获取验证码',
        /** 获取验证码按钮不能点击 **/
        slideisSuccess: false,
        /** 定时器 **/
        _timer:function(){},
        codeSecond:60,
      }
    },

    methods: {
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
      },
      handleLogin() {
        this.$refs['resetForm'].validate(valid => {
          if (valid) {
            const codeRegex = /^\d{4}$/
            if (!codeRegex.test(this.resetForm.code)) {
              this.$notify.error({title: '提示', message: '验证码由四位数字组成'});
              return false;
            }
            loginApi.registerInfo(this.resetForm).then(res => {
              if (res.code == 1){
                this.slideisSuccess = true;
                this.codeButtonTitle = "获取验证码";
                this.codeSecond = 60;
                clearInterval(this._timer);
                this.$notify.success({title: '成功', message: '成功注册'});
                this.$router.push({path: '/login'});
              } else {
                this.$notify.warning({title: '提示', message: res.message});
              }
            }).catch(() => {
            })
          } else {
            this.$notify.warning({title: '提示', message: '请按规则填写信息'});
          }
        })
      },
      /** 滑动验证通过时调用 **/
      slideSuccessFun(){
        this.slideisSuccess = true;
        this.$notify({title: '验证成功', message: '通过验证', type: 'success'});
      },
      /** 获取验证码 **/
      getCode(){
        if (!this.slideisSuccess){
          /** 滑动验证没有通过 **/
          return false;
        } else {
          /** 滑动验证通过 **/
          this.$refs['resetForm'].validate(valid => {
            if (valid) {
              loginApi.resetVercode(this.resetForm).then(res => {
                if (res.code == 1){
                  this.slideisSuccess = false;
                  this.codeSecond = 60;
                  this.timer();
                } else {
                  this.$notify.warning({title: '提示', message: res.message});
                }
              }).catch(() => {
              })
            }
          })
        }
      },
      /** 定时器 **/
      timer() {
        this._timer = setInterval(()=>{
          this.timerShowData();
        },1000)
      },
      timerShowData(){
        if (this.codeSecond<0){
          clearInterval(this._timer);
          this.slideisSuccess = true;
          this.codeButtonTitle = "获取验证码";
          this.codeSecond = 60;
        } else {
          this.codeButtonTitle = "已发送("+(this.codeSecond--)+"S)";
        }
      },
      homeImageClick(){
        this.$router.push({name:'home'});
      }
    },
    destroyed() {
      clearInterval(this._timer)
    }
  }
</script>
<style>
  .licc-reset-header{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 110px;
  }
  .licc-reset-top-row{
    width: 100%;
  }
  .licc-reset-center{
    height: 407px;
  }
  .licc-reset-footer{
    height: 118px;
  }
  .licc-reset-center-content{
    width: 1100px;
  }
  .licc-reset-top-img{
    width: 240px;
  }
  .licc-login-top-el-image{
    width: 239px;
    height: 51px;
    cursor: pointer;
  }
  .licc-reset-top-title{
    width: 240px;
    padding-left: 20px;
    line-height: 55px;
    letter-spacing: 3px;
    font-weight: 800;
    color: #67547b;;
    font-size: 22px;
  }
  .licc-reset-top-router-home{
    height: 100px;
    width: 620px;
    text-align: right;
  }
  .licc-reset-top-router-home a{
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    font-size: 14px;
    color: #666;
  }
  .licc-reset-top-router-home a:hover{
    color: #409EFF;
  }
  .licc-reset-center-bottom{
    text-align: right;
    font-size: 12px;
  }
  .licc-reset-center-bottom a{
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    color: #666;
  }
  .licc-reset-center-bottom a:hover{
    color: #409EFF;
  }
  .licc-reset-footer-content{
    border-top: solid 1px #e6e6e6;
    width: 1100px;

  }
  /** 输入框 **/
  .licc-reset-select-row{
    width: 380px;
    border: 1px solid #DCDFE6;
    border-radius: 4px
  }
  .licc-reset-select-row:hover{
    border: 1px solid #C0C4CC;
  }
  .licc-reset-select-input>.el-input__inner{
    border: 1px solid #fff;
  }
  .licc-reset-select-button{
    line-height: 40px;
    color: #909399;
    border-radius: 0px 4px 4px 0px;
    padding: 0px 0px;
    background-color: #F5F9FF;
    border: 1px solid #fff;
    cursor: not-allowed;
  }
  .licc-reset-select-button-slide{
    cursor: pointer;
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  .reset-container {
    width: 380px;
    margin-top: 80px;
  .el-input {
  input {
    border: 0px;
  }
  }
  }
</style>
